<template>
  <div class="emoji-avatar-picker">
    <h3 id="emoji-avatar-heading" class="text-sm font-medium text-gray-700 mb-2">系统Emoji头像</h3>
    
    <div class="grid grid-cols-5 gap-2 p-2 bg-gray-50 rounded-lg shadow-inner" role="group" aria-labelledby="emoji-avatar-heading">
      <button 
        v-for="emoji in emojiAvatars" 
        :key="emoji"
        @click="selectEmoji(emoji)"
        type="button"
        class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all transform hover:scale-110"
        :class="selectedEmoji === emoji ? 'border-primary bg-blue-50' : 'border-transparent bg-white hover:bg-gray-100'"
        :aria-label="`选择${emoji}作为头像`"
        :aria-pressed="selectedEmoji === emoji"
      >
        <span class="text-2xl">{{ emoji }}</span>
      </button>
    </div>
    
    <div class="flex items-center justify-between mt-3">
      <div v-if="selectedEmoji" class="flex items-center">
        <span class="mr-2 text-sm text-gray-600">已选择:</span>
        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" aria-live="polite">
          <span class="text-2xl">{{ selectedEmoji }}</span>
        </div>
      </div>
      <button 
        @click="applySelectedEmoji"
        type="button" 
        class="px-4 py-1.5 bg-primary text-white rounded-md hover:bg-blue-600 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        :disabled="!selectedEmoji"
      >
        设置为头像
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits<{
  (e: 'select', value: string): void;
}>();

// 预设的Emoji头像选项
const emojiAvatars = [
  '😊', '😎', '🤓', '😄', '😇',
  '🐱', '🐶', '🐼', '🦊', '🦁',
  '🍎', '🍕', '🍦', '🍩', '☕',
  '⚽', '🏀', '🎮', '🎵', '🚀'
];

const selectedEmoji = ref('');

// 选择一个Emoji
function selectEmoji(emoji: string): void {
  console.log('选择Emoji:', emoji);
  selectedEmoji.value = emoji;
}

// 应用选择的Emoji作为头像
function applySelectedEmoji(): void {
  if (selectedEmoji.value) {
    const emojiValue = `emoji:${selectedEmoji.value}`;
    console.log('设置Emoji头像:', emojiValue);
    emit('select', emojiValue);
    
    // 显示视觉反馈
    alert(`已设置 ${selectedEmoji.value} 为头像！点击保存按钮完成更新。`);
  }
}
</script>

<style scoped>
.emoji-avatar-picker {
  max-width: 300px;
}
</style> 